<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EditProfile - Group4 UniHub</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../styles/main.css">
    <link rel="stylesheet" href="../styles/components.css">
    <link rel="stylesheet" href="../styles/noticeboard.css">
    <link rel="stylesheet" href="../styles/profile.css">
</head>
<body>
    <div id="header">
        <app-header page-title="Edit Profile"></app-header>
    </div>
    
    <div class="main-container">
        <div id="sidebar"></div>
        
        <div class="content">
            <div class="edit-profile-form">
                <div class="form-section">
                    <div class="photo-upload">
                        <img id="previewPhoto" src="../assets/images/default_photo.jpg" alt="User Avatar">
                        <input type="file" id="photoInput" accept="image/*" hidden>
                        <button class="upload-btn" onclick="document.getElementById('photoInput').click()">Change Avatar</button>
                        <button class="change-password-btn">Change Password</button>
                    </div>
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" id="name" name="name" value="Quinn">
                    </div>
                    <div class="form-group">
                        <label for="bio">Bio</label>
                        <textarea id="bio" name="bio" rows="3">Computer Science and Technology • Junior Year</textarea>
                    </div>
                </div>

                <div class="form-section">
                    <h3>Interests</h3>
                    <div class="item-list">
                        <div class="item-container">
                            <!-- Interest list will be displayed here -->
                        </div>
                        <button class="add-btn">Add Interest</button>
                    </div>
                </div>

                <div class="form-section">
                    <h3>Current Courses</h3>
                    <div class="item-list">
                        <div class="item-container">
                            <!-- Course list will be displayed here -->
                        </div>
                        <button class="add-btn">Add Course</button>
                    </div>
                </div>

                <div class="form-section">
                    <h3>Achievements</h3>
                    <div class="item-list">
                        <div class="item-container">
                            <!-- Achievement list will be displayed here -->
                        </div>
                        <button class="add-btn">Add Achievement</button>
                    </div>
                </div>

                <div class="form-actions">
                    <button class="save-btn">Save Changes</button>
                    <button class="cancel-btn" onclick="window.history.back()">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <div id="footer"></div>

    <div id="passwordModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <form id="passwordForm">
                <h2>Change Password</h2>
                <label>Current Password:</label>
                <input type="password" id="currentPassword" name="currentPassword" required>
                <label>New Password:</label>
                <input type="password" id="newPassword" name="newPassword" required>
                <label>Confirm New Password:</label>
                <input type="password" id="confirmPassword" name="confirmPassword" required>
                <button type="submit">Save Changes</button>
            </form>
        </div>
    </div>

    <script src="../components/header.js"></script>
    <script type="module" src="../components/sidebar.js"></script>
    <script src="../components/footer.js"></script>
    <script type="module" src="../scripts/edit-profile.js"></script>
</body>
</html> 